<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/common/jquery/jquery.js}"></script>
    <link th:href="@{/common/layui-new/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/common/layui/admin.css}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" th:href="@{/common/SyntaxHighlighter/styles/shCore.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/common/SyntaxHighlighter/styles/shThemeDefault.css}" type="text/css">
    <script th:src="@{/common/layui-new/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/XRegExp.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shCore.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushJava.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushJScript.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushSql.js}"></script>
    <script type="text/javascript" th:src="@{/common/showdown/showdown.min.js}"></script>
</head>
<body>
    <div class="layui-fluid" >
        <div class="layui-row layui-col-space12">
            <div class="layui-col-xs6 layui-col-md3">
                <!-- 填充内容 -->
                <div class="layui-card">
                    <div class="layui-card-header">文件目录</div>
                    <div class="layui-card-body">
                        <div id="tree" class="demo-tree demo-tree-box" style="width: 285px; height: 400px; overflow: scroll;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-header">相关note</div>
                    <div class="layui-card-body">
                        <table class="layui-hide" id="test" lay-filter="test"></table>

                        <script type="text/html" id="toolbarDemo">
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon" lay-event="addNote"></i></button>
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon" lay-event="updateNote"></i></button>
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon" lay-event="deleteNote"></i></button>
                            </div>
                        </script>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">内容
                        <a href="javascript:;" class="layui-font-blue" id="demo3">选择所属版本 <i class="layui-icon layui-font-12 layui-icon-down"></i></a>
                    </div>
                    <div class="layui-card-body">
                        <div id="detail"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var currentfile="";
    var currentversion="";
    layui.use(['tree', 'util','table','dropdown'], function(){
        var tree=layui.tree;
        function getQueryString(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURIComponent(r[2]);
            };
            return null;
        }
        var uuid=getQueryString('uuid');
        $(document).ready(function(){
            $.ajax({
                url:'http://192.168.56.1:8888/ws/compose?uuid='+uuid,
                type:'post',
                dataType: 'JSON',
                contentType: 'application/json',
                success:function (obj) {
                    var zNodes =[];
                    setNode(zNodes,obj.data);
                    setOption(obj.association);
                    tree.render({
                        elem: '#tree'
                        ,data: zNodes
                        ,showLine: false  //是否开启连接线
                        ,click:function (obj) {
                            change(obj.data.name,obj.data.uuid,obj.data.dir);
                        }
                    });
                }
            });

        });
        function setOption(name){
            var names=name.split("OR");
            var dropdown = layui.dropdown;

            var data=[];
            names.forEach(function (obj) {
                data.push({title:obj,id:obj});
            })
            dropdown.render({
                elem: '#demo3',
                data:data,
                click: function(obj){
                    this.elem.val(obj.title);
                    this.elem.text(obj.title);
                    currentversion=obj.title;
                }
            })
        }
        function  setNode(znode,obj) {
            var node=new Object();
            node.title=obj.name;
            node.uuid=obj.uuid;
            node.dir=obj.dir;
            node.id=obj.uuid;
            node.children=[];
            $.each(obj.childs,function (i,val) {
                setNode(node.children,val);
            })
            znode.push(node);
        }

        function change(name,uuid,dir) {
            var array=dir.split("\\")
            var filename=array[array.length-1];
            currentfile=filename;
            $.ajax({
                url:"http://192.168.56.1:8888/ecco/detail",
                type:"get",
                data: {name:name,uuid:uuid,dir:dir,version:currentversion},
                success:function (data) {
                    document.getElementById("detail").innerHTML = data;
                    var line=$("#javaline").text();
                    $("#javadetail").attr("class","brush: java;highlight:"+line);
                    SyntaxHighlighter.highlight();//设置代码高亮
                    layui.table.reload('test', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            filename: currentfile
                        }
                    });
                }
            })
        }
    });
    layui.use(['util', 'laydate', 'layer'], function(){
        var util = layui.util
            ,laydate = layui.laydate
            ,$ = layui.$
            ,layer = layui.layer;
        //固定块
        util.fixbar({
            bar1: "&#xe60b"
            ,css: {right: 10, bottom: 50}
            ,bgcolor: '#c2c2c2'
            ,click: function(type){
                if(type === 'bar1'){
                    window.open("https://lucene.apache.org/core/4_7_0/changes/Changes.html#older", "_blank");
                }
            }
        });
    });

</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/ws/findAllByFilename'
            ,toolbar: '#toolbarDemo'
            ,cols: [
                        [
                            {type:'radio'}
                        ,{field:'id', width:80, title: 'ID'}
                        ,{field:'noteline', width:80, title: '所在行'}
                        ,{field:'notecode', width:80, title: '代码', sort: true}
                        ,{field:'notecontent', width:80, title: '内容'}
                        ,{field:'noterelease', title: '相关release', minWidth: 100}
                        ,{field:'featurename', width:80, title: '所属feature', sort: true}
                        ]
            ]
            ,id:'test'
            ,page: false
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch(obj.event){
                case 'addNote':
                    var data = checkStatus.data;  //获取选中行数据
                    layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: 'note'
                        ,success:function (layero, index) {
                            // 获取子页面的iframe
                            var iframe = window['layui-layer-iframe'+index];
                            // 向子页面的全局函数child传参
                            iframe.setName(currentfile);
                        }
                    });
                    break;
                case 'updateNote':
                    alert("update");
                    break;
                case 'deleteNote':
                    alert("dele");
                    break;

            };
        });
    });
</script>
</html>